<template>
    <div>
        <!-- 顶部栏 -->
        <header class="app-header">
            <div class="logo-wrapper">
                <router-link to="/" class="logo-link">
                <span class="logo-text"  @click="txt">小月的生活</span>
                </router-link>
                <span>/{{ store.state.txt }}</span>
            </div>

            <!-- 未登录状态 -->
            <div class="user-actions" v-if="!store.state.user.name">
                <el-button link @click="handleRegister">注册</el-button>
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </div>

            <!-- 带用户头像的登录状态 -->
            <div class="user-actions" v-else>
                <el-dropdown>
                <div class="user-profile">
                    <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <span class="user-name">名称：{{ store.state.user.name }}</span>
                    <span class="user-name">余额：{{ store.state.user.values/100 }}</span>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="userInit">个人中心</el-dropdown-item>
                        <el-dropdown-item @click="updatevalues">增加余额</el-dropdown-item>
                        <el-dropdown-item @click="addGGoods">增加商品</el-dropdown-item>
                        <el-dropdown-item @click="deLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
                </el-dropdown>
            </div>
        </header>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { reactive } from 'vue';
import { ElMessageBox } from 'element-plus';

    const router = useRouter();
    const store = useStore();

    function txt(){
        store.commit('setTxt','首页')
        store.commit('updateUserInitUid','')
    }
    function handleRegister() {
        store.commit('setTxt','注册用户')
        router.push('/register');
    }
    function handleLogin() {
        store.commit('setTxt','登录用户')
        router.push('/login');
    }
    function addGGoods() {
        store.commit('setTxt','添加商品')
        router.push('/addGoods');
    }
    function userInit() {
        store.commit('setTxt','个人主页')
        router.push('/userInit');
    }
    function updatevalues() {
        store.commit('setTxt','增加余额')
        router.push('/updatevalues');
    }
    function deLogin() {
        ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const user =reactive({
            name:null,
            uid: 0,
            values: 0
        })
        store.commit('userinit',user)
        store.commit('setTxt','首页')
        router.push({name: 'home'})
    });
    }

</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: #FEABB5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-link {
  text-decoration: none;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #409eff;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.user-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background 0.3s;
}

.user-profile:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-name {
  font-size: 14px;
  color: #333;
}


@media (max-width: 768px) {
  .app-header {
    padding: 0 15px;
    height: 50px;
  }
  
  .logo-text {
    font-size: 20px;
  }
  
  .user-name {
    display: none;
  }
}
</style>